<template>
  <div class="app-container thesis-home">
    <el-row :gutter="20">
      <!-- 个人信息板块 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card class="personal-info">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div class="body">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="姓名">曾志龙</el-descriptions-item>
              <el-descriptions-item label="学号">20210003</el-descriptions-item>
              <el-descriptions-item label="专业">数据科学与大数据技术</el-descriptions-item>
              <el-descriptions-item label="班级">数据1901</el-descriptions-item>
              <el-descriptions-item label="指导教师">张教授</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
      
      <!-- 毕业论文基本信息展示区 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <el-card class="thesis-info">
          <div slot="header" class="clearfix">
            <span>毕业论文基本信息</span>
          </div>
          <div class="body">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="论文题目">基于大数据的用户行为分析与推荐系统研究</el-descriptions-item>
              <el-descriptions-item label="论文类型">应用研究</el-descriptions-item>
              <el-descriptions-item label="研究领域">数据挖掘与推荐系统</el-descriptions-item>
              <el-descriptions-item label="提交日期">2025-05-30</el-descriptions-item>
              <el-descriptions-item label="关键词">大数据, 用户行为分析, 推荐算法, 协同过滤</el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag type="success">已完成</el-tag>
              </el-descriptions-item>
            </el-descriptions>
            <div class="thesis-abstract">
              <h4>摘要</h4>
              <p>本文设计并实现了一个基于大数据的用户行为分析与推荐系统，采用Hadoop和Spark作为大数据处理框架，通过收集、清洗和分析用户行为数据，构建了多种推荐算法模型。系统包括数据采集模块、数据处理模块、特征工程模块、推荐算法模块和结果展示模块，实现了基于内容的推荐、协同过滤推荐和混合推荐等多种推荐策略。实验结果表明，该系统能够有效挖掘用户兴趣偏好，推荐准确率达到92.3%，显著提升了用户体验和平台转化率，为电商、内容平台等领域提供了有效的个性化推荐解决方案。</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 毕业论文成果详细介绍模块 -->
      <el-col :span="24">
        <el-card class="thesis-results">
          <div slot="header" class="clearfix">
            <span>毕业论文成果展示</span>
          </div>
          <div class="body">
            <el-tabs v-model="activeTab" @tab-click="handleTabClick">
              <el-tab-pane label="研究成果" name="research">
                <div v-for="(item, index) in thesisResults.research" :key="index" class="result-item">
                  <el-card shadow="hover">
                    <div slot="header" class="result-header">
                      <span>{{ item.title }}</span>
                      <el-tag size="mini" :type="getResultType(item.type)">{{ item.type }}</el-tag>
                    </div>
                    <div class="result-content">
                      <p>{{ item.description }}</p>
                      <div class="result-meta">
                        <span>发布时间: {{ item.publishDate }}</span>
                        <el-button v-if="item.link" type="text" @click="openLink(item.link)">查看详情</el-button>
                      </div>
                    </div>
                  </el-card>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="论文章节" name="chapters">
                <el-timeline>
                  <el-timeline-item
                    v-for="(chapter, index) in thesisResults.chapters"
                    :key="index"
                    :timestamp="chapter.updateTime"
                    placement="top">
                    <el-card>
                      <h4>{{ chapter.title }}</h4>
                      <p>{{ chapter.summary }}</p>
                      <div class="chapter-actions">
                        <el-button size="mini" type="primary" @click="viewChapter(chapter.id)">查看章节</el-button>
                        <el-button size="mini" type="success" @click="downloadChapter(chapter.id)">下载</el-button>
                      </div>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </el-tab-pane>
              
              <el-tab-pane label="相关资源" name="resources">
                <el-row :gutter="16">
                  <el-col :span="8" v-for="(resource, index) in thesisResults.resources" :key="index">
                    <el-card :body-style="{ padding: '0px' }" class="resource-card">
                      <img :src="resource.image" class="resource-image">
                      <div style="padding: 14px;">
                        <span>{{ resource.title }}</span>
                        <div class="bottom">
                          <time class="time">{{ resource.uploadDate }}</time>
                          <el-button type="text" class="button" @click="downloadResource(resource.id)">下载</el-button>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ZengZhilongHome',
  data() {
    return {
      activeTab: 'research',
      thesisResults: {
        research: [
          {
            title: '基于深度学习的用户行为预测模型研究',
            type: '期刊论文',
            description: '本文提出了一种基于深度学习的用户行为预测模型，通过长短期记忆网络(LSTM)和注意力机制，提高了用户行为预测的准确性，在真实数据集上的实验表明，该模型的预测准确率比传统方法提升了8.5%。',
            publishDate: '2024-10-10',
            link: '#'
          },
          {
            title: '大数据环境下的推荐算法优化研究',
            type: '会议论文',
            description: '本文针对大数据环境下推荐算法的性能瓶颈问题，提出了一种基于分布式计算的推荐算法优化方案，通过并行计算和增量更新技术，显著提高了推荐系统的实时性和可扩展性。',
            publishDate: '2024-12-05',
            link: '#'
          },
          {
            title: '多源数据融合的用户画像构建方法',
            type: '专利',
            description: '本专利提出了一种多源数据融合的用户画像构建方法，通过整合用户行为数据、社交网络数据和内容消费数据，构建了更加全面和精准的用户画像，为个性化推荐提供了更好的基础。',
            publishDate: '2025-01-15',
            link: '#'
          }
        ],
        chapters: [
          {
            id: 1,
            title: '第一章 绪论',
            summary: '本章介绍了用户行为分析和推荐系统的研究背景、意义、国内外研究现状以及本文的主要研究内容和创新点。',
            updateTime: '2025-01-15'
          },
          {
            id: 2,
            title: '第二章 相关技术与理论基础',
            summary: '本章介绍了大数据处理技术、用户行为分析方法、推荐算法等相关技术，为后续系统设计奠定理论基础。',
            updateTime: '2025-02-20'
          },
          {
            id: 3,
            title: '第三章 系统需求分析与架构设计',
            summary: '本章对用户行为分析与推荐系统进行了需求分析，设计了基于大数据的系统架构，包括数据采集、存储、处理和分析等模块。',
            updateTime: '2025-03-10'
          },
          {
            id: 4,
            title: '第四章 用户行为分析与特征提取',
            summary: '本章详细介绍了用户行为数据的分析方法，包括数据预处理、行为模式识别、特征提取等关键技术。',
            updateTime: '2025-04-05'
          },
          {
            id: 5,
            title: '第五章 推荐算法设计与实验分析',
            summary: '本章设计了多种推荐算法，包括基于内容的推荐、协同过滤推荐和混合推荐，并通过实验对比分析了各算法的性能。',
            updateTime: '2025-05-10'
          }
        ],
        resources: [
          {
            id: 1,
            title: '系统架构图',
            image: 'https://picsum.photos/seed/zeng-architecture/200/150.jpg',
            uploadDate: '2025-01-10'
          },
          {
            id: 2,
            title: '数据流程图',
            image: 'https://picsum.photos/seed/zeng-dataflow/200/150.jpg',
            uploadDate: '2025-02-05'
          },
          {
            id: 3,
            title: '算法对比分析',
            image: 'https://picsum.photos/seed/zeng-algorithm/200/150.jpg',
            uploadDate: '2025-03-15'
          },
          {
            id: 4,
            title: '实验结果展示',
            image: 'https://picsum.photos/seed/zeng-results/200/150.jpg',
            uploadDate: '2025-04-20'
          }
        ]
      }
    }
  },
  methods: {
    getResultType(type) {
      const typeMap = {
        '期刊论文': 'primary',
        '会议论文': 'success',
        '专利': 'warning',
        '软件著作权': 'info'
      }
      return typeMap[type] || 'info'
    },
    handleTabClick(tab) {
      console.log('切换标签页:', tab.name)
    },
    openLink(link) {
      window.open(link, '_blank')
    },
    viewChapter(chapterId) {
      this.$message.info(`查看章节 ${chapterId}`)
    },
    downloadChapter(chapterId) {
      this.$message.success(`开始下载章节 ${chapterId}`)
    },
    downloadResource(resourceId) {
      this.$message.success(`开始下载资源 ${resourceId}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.thesis-home {
  padding: 20px;
  
  .personal-info, .thesis-info, .thesis-results {
    margin-bottom: 20px;
    
    .body {
      .thesis-abstract {
        margin-top: 20px;
        
        h4 {
          margin-bottom: 10px;
          color: #303133;
        }
        
        p {
          line-height: 1.6;
          color: #606266;
        }
      }
      
      .result-item {
        margin-bottom: 15px;
        
        .result-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        
        .result-content {
          .result-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            color: #909399;
            font-size: 14px;
          }
        }
      }
      
      .resource-card {
        margin-bottom: 20px;
        
        .resource-image {
          width: 100%;
          height: 150px;
          object-fit: cover;
          display: block;
        }
        
        .bottom {
          margin-top: 13px;
          line-height: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .time {
            font-size: 13px;
            color: #999;
          }
          
          .button {
            padding: 0;
            min-height: auto;
          }
        }
      }
      
      .chapter-actions {
        margin-top: 10px;
        text-align: right;
      }
    }
  }
}
</style>